<template>
    <view class="content" v-if="isShow">
        <!-- status	1未支付 2待接单 3服务中 4已完成 -->
        <view class="header" v-if="data.status == 1">
            <u-icon name="error-circle" color="#000" size="44" margin-bottom="0" margin-top="0"></u-icon>
            <view>未支付</view>
        </view>
        <view class="header" v-if="data.status == 2">
            <u-icon name="more-circle" color="#000" size="44" margin-bottom="0" margin-top="0"></u-icon>
            <view>待接单</view>
        </view>
        <view class="header" v-if="data.status == 3">
            <u-icon name="more-circle" color="#000" size="44" margin-bottom="0" margin-top="0"></u-icon>
            <view>服务中</view>
        </view>
        <view class="header" v-if="data.status == 4">
            <u-icon name="checkmark-circle" color="#000" size="44" margin-bottom="0" margin-top="0"></u-icon>
            <view>已完成</view>
        </view>
        
        <view class="box">
            <view class="info-box">
                <view class="info">
                    <image :src="IMAGEURL + 'static/icon/icon_01.png'" class="icon-01"></image>
                    <view class="name">{{data.name}}</view>
                    <view class="male" v-if="data.gender == 1">男</view>
                    <view class="female" v-if="data.gender == 2">女</view>
                    <view class="age">{{data.age}}岁</view>
                </view>
                <!-- <view class="btn-call" v-if="data.status == 3" @click="$call(data.mobile)">联系电话</view> -->
                <view class="btn-call" v-if="data.status == 3" @click="doCall">联系电话</view>
            </view>
            <view class="add" v-if="data.status != 2">
                <view class="add-t">服务目的地</view>
                <view class="add-d">{{data.address}}</view>
            </view>
        </view>
        <view class="box">
            <view class="item">
                <image :src="data.items_image" class="img"></image>
                <view class="item-r">
                    <view class="cate">{{data.service_type}}</view>
                    <view class="item-d">
                        <view class="u-flex-1">
                            <text class="cate-t">{{data.items}}</text>
                            <text class="subject">{{data.items2}}</text>
                        </view>
                        <view class="num" v-if="data.type == 2">剩余{{data.num}}次服务</view>
                    </view>
                </view>
            </view>
            <view class="item">
                <view class="u-p-r-15">服务选择</view>
                <view>{{data.service}}</view>
            </view>
            <view class="item2">
                <view class="u-p-r-15">服务时间</view>
                <view class="times">
                    <text class="u-p-b-10" v-if="data.type == 2">{{data.cycle}}周</text>
                    <view v-for="(item, index) in data.week" :key="item.date">
                        <text v-if="data.type == 1">
                            {{item.date}}({{ item.week }}) {{ item.start_time }}-{{ item.end_time }}
                        </text>
                        <text v-if="data.type == 2">
                            {{ item.week }} {{ item.start_time }}-{{ item.end_time }}
                        </text>
                    </view>
                </view>
            </view>
            <view class="item">
                <view class="u-p-r-15">价格</view>
                <view class="price">￥<text>{{data.price}}</text></view>
            </view>
            <view class="item">
                <view class="u-p-r-15 u-flex">
                    <view class="cou-icon">券</view>
                    <view>平台优惠券</view>
                </view>
                <view class="price">￥<text>{{data.coupon}}</text></view>
            </view>
            <view class="total">
                <view>
                    优惠<text class="money">￥{{data.coupon}}</text>
                </view>
                <view class="u-p-l-30">
                    合计 ￥<text class="money-t">{{data.order_amount}}</text>
                </view>
            </view>
            <!-- 美洽 -->
            <view class="line-kf" @click="QRshow = true">
                <image :src="IMAGEURL + 'static/icon/tel_03.png'" class="tel-03"></image>
                <view>在线客服</view>
            </view>
        </view>
        
        <view class="yq" v-if="data.delay_order && data.delay_order.length > 0">
            <view class="yq-tit">服务延期</view>
            <view class="yq-item" v-for="(item, index) in data.delay_order" :key="index">
                <view class="yq-cen">
                    <view class="yq-num">
                        延期：<text>{{item.delay}}</text>
                    </view>
                    <view class="yq-money">
                        价格：￥<text>{{item.order_amount}}</text>
                    </view>
                </view>
                <view class="yq-btns" v-if="item.status == 2">
                    <view class="yq-refuse" @click="$gTo(`/serve/pages/order/cancel-order?id=${item.id}`)">拒绝延期</view>
                    <view class="yq-agree" @click="agreeDelay(item)">同意延期</view>
                </view>
                <view class="yq-btns" v-if="item.status == 3">
                    <view class="yq-agree">已同意延期</view>
                </view>
            </view>
        </view>
        
        <view class="box">
            <view class="title">
                <image :src="IMAGEURL + 'static/icon/icon_02.png'" class="icon-02"></image>
                <view class="title-text">备注</view>
            </view>
            <view class="notes">{{data.remark || '无'}}</view>
        </view>
        
        <view class="box u-p-t-30">
            <view class="list">
                <view>订单编号</view>
                <view class="list-r">
                    <view class="order-no">{{data.out_trade_no}}</view>
                    <view class="copy" @click="copy(data.out_trade_no)">复制</view>
                </view>
            </view>
            <view class="list" v-if="data.create_time">
                <view>下单时间</view>
                <view class="list-r">{{data.create_time}}</view>
            </view>
            <view class="list" v-if="data.pay_time">
                <view>付款时间</view>
                <view class="list-r">{{data.pay_time}}</view>
            </view>
            <view class="list" v-if="data.start_time">
                <view>开始服务时间</view>
                <view class="list-r">{{data.start_time}}</view>
            </view>
            <view class="list" v-if="data.finish_time">
                <view>完成服务时间</view>
                <view class="list-r">{{data.finish_time}}</view>
            </view>
        </view>
        
        <view class="box u-p-b-30" v-if="data.status == 3 ||data.status == 4">
            <view class="ser-tit">
                <view class="u-flex">
                    <image :src="IMAGEURL + 'static/icon/icon_16.png'" class="icon-16"></image>
                    <view class="title-text">服务记录</view>
                </view>
                <view class="btn-more" v-if="data.record.length > 0" @click="$gTo(`/pages/order/study-record?oid=${id}&fromServe=${1}`)">查看更多</view>
            </view>
            <view class="study" v-for="(el, ind) in data.record" :key="ind" v-if="ind < 1">
                <view>{{el.date}}</view>
                <view class="study-note">特别说明：{{el.record}}</view>
                <view class="img-box">
                    <image :src="item.image" class="study-img" v-for="(item, index) in el.images" :key="index"
                        @click="doPreview(el.images, index)"></image>
                </view>
            </view>
            <!-- 单次 -->
            <view class="create" v-if="data.status == 4 && data.record_count > 0" @click="$gTo(`./create?id=${id}`)">添加记录</view>
            <!-- 周期 -->
            <view class="create" v-if="(data.status == 3 && data.start == 0 && data.record_count > 0) || (data.status == 4 && data.record_count > 0)" @click="$gTo(`./create?id=${id}`)">添加记录</view>
        </view>
        <!-- user_id用户（下单人），service_user_id服务人员 -->
        <view class="footer" v-if="data.status != 4">
            <view class="btn1" v-if="data.status == 2" @click.stop="doReceive">确认接单</view>
            <view class="btn2" v-if="data.status == 3" @click="$gTo(`/mine/pages/chat/chat?otherId=${data.user_id}&selfId=${data.service_user_id}`)">
                <u-icon name="chat" color="#fff" size="34" label="在线沟通" label-size="30" label-color="fff"></u-icon>
            </view>
            <view class="btn3" v-if="data.status == 3 && data.start == 0" @click="startService">开始服务</view>
            <view class="btn3" v-if="data.status == 3 && data.start == 1" @click="finishService">完成任务</view>
        </view>
        
        <!-- 企业微信二维码 -->
        <u-mask :show="QRshow" mode="center" border-radius="15">
            <view class="popup2">
                <view class="win-box3">
                    <view class="u-p-40">
                        <image :src="service.qr_code" :show-menu-by-longpress="true" class="qr-img" @click.stop="$previewImage(service.qr_code)"></image>
                        <view class="gzh-text">长按识别二维码添加企业微信</view>
                    </view>
                    <image @click="QRshow = false" class="pop-del2" :src="IMAGEURL + 'static/icon/close_02.png'"></image>
                </view>
            </view>
        </u-mask>
    </view>
</template>

<script>
    import { IMAGEURL } from '@/static/js/common.js';
    
    export default {
        data() {
            return {
                IMAGEURL,
                id: '',
                data: {},
                isShow: false,
                QRshow: false,
                service: {},
            };
        },
        onLoad(option) {
            this.id = option.id
            this.getService()
        },
        onShow() {
            this.getData()
        },
        methods: {
            // 获取隐私号码 拨打
            doCall() {
                this.$ajax('privacy_number', {
                	user_token: this.$getSync('userToken'),
                	id: this.id,
                    type: 2,// 1用户 2陪伴师
                }).then(ret => {
                	if (ret.success == 1000) {
                		uni.makePhoneCall({
                		    phoneNumber: ret.detail.number
                		});
                	} else {
                		this.$toast(ret.msg);
                	}
                });
            },
            
            // 获取客服电话
            getService() {
            	this.$ajax('service_center', {
            		
            	}).then(ret => {
            		this.service = ret.detail
            	});
            },
            
            // 完成任务
            finishService() {
                this.$ajax('finish_service', {
                	user_token: this.$getSync('userToken'),
                	id: this.id,//订单id
                }).then(ret => {
                	if (ret.success == 1000) {
                        this.$toast('完成任务成功')
                        setTimeout(() => {
                            this.getData()
                        }, 500)
                	} else {
                		this.$toast(ret.msg);
                	}
                });
            },
            
            // 开始服务
            startService() {
                this.$ajax('start_service', {
                	user_token: this.$getSync('userToken'),
                	id: this.id,//订单id
                }).then(ret => {
                	if (ret.success == 1000) {
                        this.$toast('开始成功')
                        setTimeout(() => {
                            this.getData()
                        }, 500)
                	} else {
                		this.$toast(ret.msg);
                	}
                });
            },
            
            // 同意延期
            agreeDelay(item) {
                this.$ajax('confirm_order_delay', {
                	user_token: this.$getSync('userToken'),
                	delay_id: item.id,//延期id
                	status: 3,//3同意 5拒绝
                }).then(ret => {
                	if (ret.success == 1000) {
                        this.$toast('延期成功')
                        setTimeout(() => {
                            this.getData()
                        }, 500)
                	} else {
                		this.$toast(ret.msg);
                	}
                });
            },
            
            // 确认接单
            doReceive() {
                this.$ajax('receiving_order', {
                	user_token: this.$getSync('userToken'),
                	id: this.id,
                }).then(ret => {
                	if (ret.success == 1000) {
                        this.$toast('接单成功')
                        setTimeout(() => {
                            this.getData()
                        }, 500)
                	} else {
                		this.$toast(ret.msg);
                	}
                });
            },
            
            getData() {
            	this.$ajax('order_detail', {
            		user_token: this.$getSync('userToken'),
            		id: this.id,
            	}).then(ret => {
            		if (ret.success == 1000) {
            			this.data = ret.detail
                        this.isShow = true
            		} else {
            			this.$toast(ret.msg);
            		}
            	});
            },
            
            //预览照片
            doPreview(item, index) {
                let arr = []
                item.forEach(cur => {
                    arr.push(cur.image)
                })
                uni.previewImage({
                    urls: arr,
                    current: index,
                    longPressActions: {
                        success: function(data) {
                        },
                        fail: function(err) {
                        }
                    }
                });
            },
            
            //复制
            copy(order_no) {
                uni.setClipboardData({
                    data: order_no,
                    success: function() {
                        console.log('success');
                    }
                });
            },
        }
    };
</script>

<style lang="scss">
    // 客服弹窗
    .popup2 {
        width: 100vw;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .win-box2 {
        width: 77vw;
        background-color: #ffffff;
        border-radius: 20upx;
        position: relative;
        background: #fff;
        border-radius: 10rpx;
        padding-bottom: 20rpx;
    }
    .qr-img{
        width: 370rpx;
        height: 370rpx;
        margin: auto;
    }
    .gzh-text{
        font-size: 26rpx;
        color: #616161;
        text-align: center;
        padding-top: 10rpx;
    }
    .pop-del {
        width: 8vw;
        height: 8vw;
        position: absolute;
        left: 35vw;
        bottom: -100upx;
    }
    .win-box3{
        width: 465rpx;
        background-color: #ffffff;
        border-radius: 20upx;
        position: relative;
        background: #fff;
        border-radius: 10rpx;
    }
    .pop-del2 {
        width: 8vw;
        height: 8vw;
        position: absolute;
        left: 27vw;
        bottom: -100upx;
    }
    
    
    .create{
        padding: 20rpx;
        color: #f29700;
        text-align: center;
        border: 2rpx solid #f29700;
        border-radius: 15rpx;
    }
    .yq{
        margin-bottom: 20rpx;
        background-color: #fff;
        border: 2rpx solid #fa4616;
        border-radius: 15rpx;
        overflow: hidden;
        padding-bottom: 25rpx;
    }
    .yq-tit{
        background-color: #fa4616;
        padding: 10rpx;
        margin-bottom: 15rpx;
        font-size: 26rpx;
        color: #fff;
        text-align: center;
    }
    .yq-item{
        padding: 25rpx 0;
        // border-bottom: 2rpx solid #fa4616;
    }
    // .yq-item:last-child{
    //     border-bottom: none;
    // }
    .yq-cen{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .yq-num{
        color: #fb4d1a;
        padding-right: 75rpx;
    }
    .yq-num>text{
        font-size: 38rpx;
        font-weight: bold;
    }
    .yq-money>text{
        font-size: 38rpx;
        font-weight: bold;
    }
    .yq-btns{
        display: flex;
        justify-content: center;
        align-items: center;
        padding-top: 20rpx;
    }
    .yq-refuse{
        font-size: 26rpx;
        color: #FFF;
        padding: 15rpx 25rpx;
        background-color: #b5b5b5;
        border-radius: 15rpx;
        margin-right: 15rpx;
    }
    .yq-agree{
        font-size: 26rpx;
        color: #FFF;
        padding: 15rpx 25rpx;
        background-color: #fb5922;
        border-radius: 15rpx;
    }
    
    
    
    
    page{
        background-color: #f5f6f8;
    }
    .content{
        padding: 0 20rpx 200rpx;
    }
    .header{
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: 30rpx;
    }
    .header>view{
        padding-left: 10rpx;
        font-size: 40rpx;
        font-weight: bold;
        line-height: 1;
    }
    
    .box{
        padding: 0 25rpx;
        margin-bottom: 20rpx;
        background-color: #fff;
        border-radius: 15rpx;
    }
    .info-box{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 30rpx;
        padding-bottom: 20rpx;
    }
    .info{
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .icon-01{
        width: 37rpx;
        height: 37rpx;
        margin-right: 15rpx;
    }
    .name{
        font-size: 32rpx;
        font-weight: bold;
        padding-right: 15rpx;
    }
    .male{
        width: 34rpx;
        height: 34rpx;
        border-radius: 5rpx;
        background-color: #edf6ff;
        font-size: 26rpx;
        color: #2d96fa;
        text-align: center;
        line-height: 34rpx;
    }
    .female{
        width: 34rpx;
        height: 34rpx;
        border-radius: 5rpx;
        background-color: #ffeeed;
        font-size: 26rpx;
        color: #ff5748;
        text-align: center;
        line-height: 34rpx;
    }
    .age{
        font-size: 26rpx;
        color: #727272;
        padding-left: 15rpx;
    }
    .add{
        padding-bottom: 30rpx;
    }
    .add-t{
        font-size: 24rpx;
        color: #727272;
    }
    .add-d{
        font-size: 30rpx;
        font-weight: bold;
        padding-top: 6rpx;
    }
    
    
    .item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 30rpx;
    }
    .item2{
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding-top: 30rpx;
    }
    .img{
        width: 112rpx;
        height: 112rpx;
        border-radius: 10rpx;
        margin-right: 20rpx;
    }
    .item-r{
        flex: 1;
    }
    .cate{
        font-size: 28rpx;
        padding-bottom: 10rpx;
    }
    .item-d{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .cate-t{
        font-size: 32rpx;
        font-weight: bold;
    }
    .subject{
        font-size: 26rpx;
        padding-left: 10rpx;
    }
    .num{
        font-size: 26rpx;
        color: #ff4a26;
        padding-left: 10rpx;
    }
    .times{
        text-align: right;
    }
    .times>view{
        padding-top: 10rpx;
    }
    .times>view:first-child{
        padding-top: 0;
    }
    .price{
        font-size: 26rpx;
        color: #ff4a26;
    }
    .price>text{
        font-size: 38rpx;
    }
    .cou-icon{
        width: 32rpx;
        height: 32rpx;
        background-color: #ff4a26;
        border-radius: 8rpx;
        font-size: 22rpx;
        color: #fff;
        line-height: 32rpx;
        text-align: center;
        margin-right: 8rpx;
    }
    .total{
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding: 30rpx 0;
        border-top: 2rpx solid #eee;
        margin-top: 30rpx;
    }
    .money{
        color: #ff4a26;
    }
    .money-t{
        font-size: 42rpx;
    }
    .line-kf{
        padding: 20rpx 0 30rpx;
        border-top: 2rpx solid #eee;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 28rpx;
        color: #444;
    }
    .tel-03{
        width: 36rpx;
        height: 30rpx;
        margin-right: 10rpx;
    }
    
    .ser-tit{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx 0 15rpx;
    }
    .btn-call{
        font-size: 28rpx;
        color: #fff;
        padding: 15rpx 25rpx;
        background-color: #a2a8b8;
        border-radius: 50rpx;
    }
    .btn-more{
        font-size: 28rpx;
        color: #fff;
        padding: 15rpx 25rpx;
        background-color: #f29700;
        border-radius: 15rpx;
    }
    .icon-03{
        width: 29rpx;
        height: 33rpx;
    }
    .icon-16{
        width: 31rpx;
        height: 31rpx;
    }
    .title{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 30rpx 0 15rpx;
    }
    .title-text{
        font-size: 30rpx;
        font-weight: bold;
        padding-left: 12rpx;
    }
    .icon-02{
        width: 27rpx;
        height: 32rpx;
    }
    .lay{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 30rpx;
    }
    .lay>view{
        width: calc(100vw / 2);
    }
    .notes{
        font-size: 24rpx;
        word-break: break-all;
        white-space: pre-line;
        padding-bottom: 30rpx;
    }
    
    
    .teacher{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx 20rpx;
        border: 2rpx solid #ffd048;
        border-radius: 20rpx;
        position: relative;
    }
    .teacher-check{
        width: 44rpx;
        height: 33rpx;
        background-color: #ffd048;
        text-align: center;
        line-height: 33rpx;
        border-radius: 20rpx 0 20rpx 0;
        position: absolute;
        right: 0;
        bottom: 0;
    }
    .avatar{
        width: 95rpx;
        height: 95rpx;
        border-radius: 50%;
        margin-right: 20rpx;
    }
    .teacher-r-t{
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .teacher-name{
        max-width: 335rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 32rpx;
        font-weight: bold;
    }
    .real{
        padding: 7rpx 8rpx;
        background-color: #000;
        border-radius: 6rpx;
        font-size: 20rpx;
        color: #feeca8;
        line-height: 1;
        margin: 0 10rpx;
    }
    .star-num{
        font-size: 28rpx;
        font-weight: bold;
        padding-left: 6rpx;
    }
    .great{
        font-size: 24rpx;
        color: #949494;
        padding-top: 10rpx;
        width: 500rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .teacher-btn{
        padding-top: 30rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .teacher-btn>view{
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 15rpx 90rpx;
        border-radius: 50rpx;
        background-color: #f5f6f8;
        font-size: 26rpx;
    }
    .icon-04{
        width: 28rpx;
        height: 28rpx;
        margin-right: 10rpx;
    }
    .add-icon{
        width: 24rpx;
        height: 29rpx;
        margin-right: 10rpx;
    }
    .rate-top{
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .rate-down{
        padding-top: 20rpx;
        font-size: 26rpx;
    }
    .rate-down>text{
        color: #949494;
        word-break: break-all;
        white-space: pre-line;
    }
    
    
    .list{
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 26rpx;
        padding-bottom: 25rpx;
    }
    .list-r{
        flex: 1;
        padding-left: 25rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .order-no{
        flex: 1;
        word-break: break-all;
        white-space: pre-line;
    }
    .copy{
        width: 90rpx;
        height: 42rpx;
        font-size: 22rpx;
        border: 2rpx solid #d1d1d1;
        border-radius: 50rpx;
        text-align: center;
        line-height: 42rpx;
        margin-left: 15rpx;
    }
    
    .study{
        font-size: 24rpx;
        color: #808aa5;
        line-height: 1.5;
        padding-bottom: 30rpx;
    }
    .study-note{
        padding-top: 10rpx;
        word-break: break-all;
        white-space: pre-line;
    }
    .img-box{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding-top: 20rpx;
    }
    .study-img{
        width: 194rpx;
        height: 194rpx;
        border-radius: 10rpx;
        margin-right: 20rpx;
    }
    
    
    .footer{
        width: 100vw;
        height: 105rpx;
        background-color: #fff;
        padding: 0 25rpx;
        position: fixed;
        bottom: 0;
        left: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .footer>view{
        font-size: 30rpx;
        border-radius: 10rpx;
        box-sizing: border-box;
    }
    .btn1{
        width: 100%;
        height: 80rpx;
        color: #fff;
        line-height: 80rpx;
        text-align: center;
        background-color: #f29700;
    }
    .btn2{
        width: 35%;
        height: 80rpx;
        color: #fff;
        line-height: 80rpx;
        text-align: center;
        background-color: #1e2128;
    }
    .btn3{
        width: 62%;
        height: 80rpx;
        color: #fff;
        line-height: 80rpx;
        text-align: center;
        background-color: #f29700;
    }
    

</style>
